<template>
	<view>
		<view class="pictures">
			<image :src="party_list.ShareBgImg" mode=""></image>
		</view>
		<view class="title">
			<text>{{party_list.Title}}</text>
		</view>
		<view class="content">
			<view class="content_lines">
				活动状态<view class="content_right">{{newStatus(party_list.Status)}}</view>
			</view>
			<view class="content_lines">
				活动类型<view class="content_right">{{party_list.ActType}}</view>
			</view>
			<view class="content_lines">
				活动地点<view class="content_right">{{party_list.Address}}</view>
			</view>
			<view class="content_lines">
				活动时间<view class="content_right">{{formattedDate}}</view>
			</view>
			<view class="content_lines">
				报名收费<view class="content_right">{{party_list.IsFee==0?"免费":party_list.RegisterFee }}</view>
			</view><!-- {{party_list.IsFee==0?"免费":party_list.RegisterFee ==null?"收费":party_list.RegisterFee}} -->
			<view class="content_lines">
				报名人数<view class="content_right">{{party_list.PeopleNum==0?"无限制":party_list.PeopleNum}}</view>
			</view>
		</view>
		<view class="details">
			<view class="details_lines"></view>
			<view class="details_tit">活动详情</view>
		</view>
		<view class="illustrate">
			<rich-text class="illustrate_cont">{{party_list.Description}}</rich-text>

		</view>
		<view class="details">
			<view class="details_lines"></view>
			<view class="details_tit">报名动态</view>
		</view>
		<view v-if="!party_list.Users || party_list.Users.length>0" v-for="(l,i) in party_list.Users" :key="i"
			class="illustrate" style="display: flex;align-items: center;justify-content: space-between;">
			<view class="illustrate_left">
				<image :src="l.HeadImgUrl" mode=""></image>
				<view class="user_name">
					{{l.Name}}
				</view>
			</view>

			<view class="">
				报名了
			</view>
			<view class="">
				{{ getTime(l.CreateTime) }}
			</view>
		</view>
		<view v-else>
			<view class="illustrate_left">亲，赶快成为第一个报名人</view>
		</view>
		<view class="bottom">
			<button open-type="share" style="margin-top: -3rpx;height: 100rpx;width: 40px;" class="bottom_box">
				<image src="../../static/img/icon_fx.png" mode=""></image>
				<view class="bottom_text"
					style="margin-top: -36rpx;display: flex;align-items: center;width: 40px;justify-content: center;">分享
				</view>
			</button>
			<view class="bottom_box" style="width: 80rpx;" @tap="golive('/pages/dynamic/Picture_live')">
				<image style="margin-left: 25%;" src="../../static/img/icon_twzb.png" mode=""></image>
				<view class="bottom_text">图文直播</view>
			</view>
			<view class="bottom_box" style="width: 80rpx;" @tap="publish()">
				<image style="margin-left: 25%;" src="../../static/tab/dynamic.png" mode=""></image>
				<view class="bottom_text">发聚农优品</view>
			</view>
			<block v-if="party_list.Status==0||party_list.Status==1">
				<view v-if="is_signed" class="bottom_btn"
					style="background-image: linear-gradient(#818792, #847b7bbd);color: #ffffff;">
					您已报名
				</view>
				<block v-else>
					<view v-if="party_list.Status==0" class="bottom_btn" @tap="sub()">
						立即报名
					</view>
					<view v-else class="bottom_btn" style="background-image: linear-gradient(#818792, #847b7bbd);color: #ffffff;">
						报名截止
					</view>
				</block>
			</block>


		</view>
		<view style="height: 160rpx;background-color: #1C1C1C;">

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				party_list: {},
				formattedDate: '',
				is_signed: false
			}
		},
		async onLoad(e) {
			this.id = e.id

			if (await this.$store.getters.getLoginState) {

				this.Get_Detail();

			}


		},
		computed: {
			// 状态格式
			newStatus() {
				return s => {
					return s == 0 ? '报名中' : s == 1 ? '进行中' : s == 2 ? '已结束' : '已结束';
				};
			},

		},
		onShareAppMessage(res) { //发送给朋友

			return {
				title: "邀请您加入" + this.party_list.Title,
				path: `/pages/dynamic/activity_details?id=${this.party_list.ID}`,
			}
		},
		methods: {
			async publish() {
				this.nav_to('/pages/dynamic/dynamic_add?a=' + this.party_list.ID + '&t=' + this.party_list.Title);
			},
			async Get_Detail() {
				let res = await this.$api.post('/Action/GetActionDetail', {
					ID: this.id
				})
				console.log('获取活动聚会列表', res);
				this.party_list = res.data

				this.party_list.Users.forEach((item, index) => {
					if (item.UserID == uni.getStorageSync('user').UserID) {
						this.is_signed = true;
					}
				})

				const startDate = new Date(res.data.StartDate);
				const endDate = new Date(res.data.EndDate);
				const startYear = startDate.getFullYear();
				const startMonth = startDate.getMonth() + 1; // 月份从0开始，需要加1
				const startDay = startDate.getDate();
				const startHours = startDate.getHours();
				const startMinutes = startDate.getMinutes();

				const endYear = endDate.getFullYear();
				const endMonth = endDate.getMonth() + 1; // 月份从0开始，需要加1
				const endDay = endDate.getDate();
				const endHours = endDate.getHours();
				const endMinutes = endDate.getMinutes();

				this.formattedDate =
					`${startYear}年${startMonth}月${startDay}日 ${String(startHours).padStart(2, '0')}:${String(startMinutes).padStart(2, '0')}-${String(endHours).padStart(2, '0')}:${String(endMinutes).padStart(2, '0')}`;
				console.log(this.formattedDate); // 输出：2023年10月24日 13:00-22:00
			},
			async sub() {

				if (this.party_list.RegisterFee > 0) {
					//需要支付费用				

					// 支付请求
					let pres = await this.$api.post('Payment/PayV2', {
						total_fee: this.party_list.RegisterFee,
						EventType: '活动报名',
						EventID: this.party_list.ID,
						body: '活动报名',
						// #ifdef MP-WEIXIN
						PayChannel: "weixin",
						// #endif
						// #ifdef APP
						PayChannel: "app"
						// #endif
					});
					// 已余额支付成功
					if (pres.data == 0) {
						isPay = true;
					} else {
						// 支付成功返回的内容
						let payObj = JSON.parse(pres.data);
						let _this = this;
						// 调用uni支付API
						uni.requestPayment({
							// 服务提供商
							provider: 'wxpay',
							// #ifdef APP
							orderInfo: payObj,
							// #endif
							// #ifdef MP-WEIXIN
							timeStamp: payObj.timeStamp,
							nonceStr: payObj.nonceStr,
							package: payObj.package,
							signType: payObj.signType,
							paySign: payObj.paySign,
							// #endif
							success(res) {

								_this.SingAction();

							},
							fail(err) {
								_this.$pv.msg('支付失败');
							}
						});
					}
				} else {
					this.SingAction();
				}


			},
			async SingAction() {

				let _this = this;

				let res = await _this.$api.post('/Action/ActionSign', {
					ID: _this.id
				})
				
				if (JSON.stringify(res.data) == "true") {
					// 添加成功
					uni.showToast({
						title: '报名成功',
					});

					const date = new Date();
					_this.party_list.Users.push({
						UserID: uni.getStorageSync('user').UserID,
						HeadImgUrl: uni.getStorageSync('user').HeadImgUrl,
						Name: uni.getStorageSync('user').Name,
						CreateTime: date
					});
				} else {
					// 其他错误
					uni.showToast({
						title: '操作失败，请稍后重试',
						icon: 'none'
					})
				}
			},

			golive() {
				uni.navigateTo({
					url: `/pages/dynamic/Picture_live?id=${this.id}`
				});
			},
		}
	}
</script>

<style lang="scss">
	view{
		color: #eee;
	}
	.pictures {
		image {
			width: 750rpx;
			height: 1446rpx;
			background-color: #166754;
		}
	}

	.title {
		margin: -40rpx 40rpx;
		width: auto;
		height: auto;
		background-image: linear-gradient(#FDF9F6, #E1C4A6);
		border-radius: 20rpx;
		color: #1F1F1F;
		font-size: 32rpx;
		overflow-wrap: break-word;
		font-family: PingFangSC-Semibold;
		font-weight: 600;
		line-height: 24px;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		z-index: 1;
		padding: 22rpx;

		text {
			color: black;
			height: auto;
			width: 608rpx;
			text-align: center;
		}
	}

	.content {
		margin: 80rpx 40rpx 20rpx;
		width: 672rpx;
		height: 480rpx;
		border-radius: 16rpx;
		background-color: #262626;

		.content_lines {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx;
			font-size: 32rpx;
			color: #FFFFFF;
			height: 40rpx;

			.content_right {
				width: 434rpx;
				height: 72rpx;
				text-align: right;
				font-size: 28rpx;
				color: #fff 50%;
				display: flex;
				align-items: center;
				justify-content: flex-end;
			}
		}
	}

	.details {
		margin-left: 40rpx;
		display: flex;
		align-items: center;

		.details_lines {
			width: 6rpx;
			height: 40rpx;
			background-image: linear-gradient(#FDF9F6, #E1C4A6);
			border-radius: 3rpx;
		}

		.details_tit {
			margin-left: 20rpx;
			width: 160rpx;
			height: 56rpx;
			font-size: 40rpx;
			font-weight: 600;
			background-image: -webkit-linear-gradient(bottom, #FDF9F6, #E1C4A6);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}
	}

	.illustrate {
		margin: 16rpx 40rpx 16rpx;
		// width: 672rpx;
		// height: 156rpx;
		border-radius: 16rpx;
		background-color: #262626;
		padding: 24rpx;

		.illustrate_date {
			font-size: 32rpx;
			color: #FFFFFF;
		}

		.illustrate_cont {
			font-size: 28rpx;
			color: #FFFFFF 50%;
		}

		.illustrate_left {
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				border: 1rpx solid #D6C6AB;
				width: 48rpx;
				height: 48rpx;
				border-radius: 100rpx;
			}

			.user_name {
				margin-left: 10rpx;
				width: 200rpx;
				font-size: 30rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}

	}

	.bottom {
		// height: 100rpx;
		// background-color: #1C1C1C;
		// padding: 0rpx 40rpx;
		// display: flex;
		height: 150rpx;
		background-color: #1C1C1C;
		padding: 0rpx 40rpx;
		display: flex;
		position: fixed;
		bottom: 0rpx;
		width: 750rpx;
		z-index: 10;

		.bottom_box {
			margin-top: 8rpx;
			margin-right: 50rpx;

			image {
				height: 48rpx;
				width: 48rpx;
			}

			.bottom_text {
				width: 48rpx;
				color: #fff 50%;
				text-align: center;
				font-size: 20rpx;
				white-space: nowrap;
			}
		}

		.bottom_btn {
			height: 72rpx;
			width: 192rpx;
			background-image: linear-gradient(#FDF9F6, #E1C4A6);
			border-radius: 40rpx;
			color: #1F1F1F;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			top: 20rpx;
			right: -80rpx;
		}
	}
</style>